﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="../00 CSS/global.css" />
    <style type="text/css">

        div {
            padding:10px;
        }
        /*************基本的垂直导航**************/
        #basic ul.nav {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            width: 8em;
            background-color: #8bd400;
            border: 1px solid #486B02;
        }
            
        #basic ul.nav li {
            display: inline; 
        }

        #basic ul.nav a {
            display: block;
            color: #2B3F00;
            text-decoration: none;
            border-top: 1px solid #E4FFD3;
            border-bottom: 1px solid #486B02;
            background: url(img/arrow.gif) no-repeat 5% 50%;
            padding: 0.3em 1em;
        }
        #basic  ul.nav a:last-child {
            border-bottom: 0;
        }
        #basic ul.nav a:hover,
        #basic ul.nav a:focus {
            color: #E4FFD3;
            background-color: #6DA203;
        }

        /*************简单的水平导航条**************/
        #horizontal ol.pagination {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            overflow: hidden;
        }
        /*水平*/
        #horizontal ol.pagination li {
            float: left;
            margin-right : 0.6em;
        }

       /*翻转*/
        #horizontal ol.pagination a,
        #horizontal ol.pagination li.selected {
            display: block;
            padding: 0.2em 0.5em;
            border: 1px solid #ccc;
            text-decoration: none;
        }

        #horizontal ol.pagination a:hover,
        #horizontal ol.pagination a:focus,
        #horizontal ol.pagination li.selected {
            background-color: blue;
            color: white;
        }

        /*设置prev和next的样式*/
        #horizontal ol.pagination a[rel="prev"],
        #horizontal ol.pagination a[rel="next"] {
            border: none;
        }

         /*添加箭头 */
        #horizontal ol.pagination a[rel="prev"]:before {
            content: "\00AB";
            padding-right: 0.5em;
        }

        #horizontal ol.pagination a[rel="next"]:after {
            content: "\00BB";
            padding-left: 0.5em;
        }

        /*************图形化导航条**************/
        #menu ul.nav {
            margin: 0;
            padding: 0;
            background: #FAA819 url(img/mainNavBg.gif) repeat-x;
            list-style: none;
            text-transform: uppercase;
            overflow: hidden;
        }

        #menu ul.nav li {
            float: left;
            white-space: nowrap;
        }

        #menu ul.nav a {
            display: block;
            padding: 0 2em;
            line-height: 2.1em;
            background: url(img/divider.gif) repeat-y left top;
            text-decoration: none;
            color: #fff;
        }

        #menu ul.nav li:first-child a {
            background: none;
        }

        #menu ul.nav a:hover,
        #menu ul.nav a:focus {
            color: #333;
        }


        /**************下拉框菜单**************/
        #dropDown ul.nav {
            width: 32em;
        }
        
         #dropDown ul.nav, #dropDown ul.nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
            border: 1px solid #486B02;
            background-color: #8BD400;
        }

        #dropDown ul.nav li {
            float: left;
            width: 8em;
        }

        /*默认时候列表项在显示器外*/
        #dropDown  ul.nav li ul {
            position: absolute;
            width: 8em;
            left: -999em;
            margin-left: -1px;
        }

        /*悬停的时候才显示出来*/
        #dropDown .nav li:hover ul {
            left: auto;
        }


        /*添加块和翻转样式*/
        #dropDown ul.nav a {
            display: block;
            color: #2B3F00;
            text-decoration: none;
            padding: 0.3em 1em;
            border-right: 1px solid #486B02;
            border-left: 1px solid #E4FFD3;
        }

        #dropDown  ul.nav li li a {
            border-top: 1px solid #E4FFD3;
            border-bottom: 1px solid #486B02;
            border-left: 0;
            border-right: 0;
        }

        #dropDown ul.nav li:last-child a {
            border-right: 0;
            border-bottom: 0;
        }

        #dropDown ul a:hover,
        #dropDown ul a:focus {
            color: #E4FFD3;
            background-color: #6DA203;
        }
    </style>
</head>
<body>
    <div id="basic">
        <h2>01.基本的垂直导航条</h2>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Our Service</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>

    <div id="horizontal">
        <h2>02.分页水平导航条</h2>
        <ol class="pagination">
            <li><a href="#" rel="prev">Prev</a></li>
            <li><a href="#">1</a></li>
            <li class="selected">2</li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#" rel="next">Next</a></li>
        </ol>
    </div>

    <div id="menu">
        <h2>03.图像化导航条:不能滑动，导致宽度不容易控制</h2>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Case Studies</a></li>
        </ul>
    </div>

    <div id="dropDown">
        <h2>04.下拉菜单</h2>
        <ul class="nav">
            <li><a href="/home/">Home</a></li>
            <li>
                <a href="/products/">Products</a>
                <ul>
                    <li><a href="/products/silverback/">Silverback</a></li>
                    <li><a href="/products/fontdeck/">Font Deck</a></li>
                </ul>
            </li>
            <li>
                <a href="/services/">Services</a>
                <ul>
                    <li><a href="/services/design/">Design</a></li>
                    <li><a href="/services/development/">Development</a></li>
                    <li><a href="/services/consultancy/">Consultancy</a></li>
                </ul>
            </li>
            <li><a href="/contact/">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>
